// app-header.component.less
.header {
  background      : #ffffff;
  box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.05);
  position        : fixed;
  top             : 0;
  left            : 0;
  right           : 0;
  z-index         : 1000;
  backdrop-filter : blur(10px);
  background      : #ffffff;


  &-content {
    max-width       : 1400px;
    margin          : 0 auto;
    padding         : 0 24px;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    height          : 64px;
    background      : #ffffff;

  }

  .brand-title {
    h1 {
      margin                 : 0;
      font-size              : 20px;
      color                  : #1a1a1a;
      font-weight            : 600;
      background             : linear-gradient(120deg, #409EFF, #36D1DC);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .nav-container {
    display    : flex;
    align-items: center;
    gap        : 32px;
  }

  .navigation {
    display      : flex;
    gap          : 4px;
    background   : #f5f7fa;
    padding      : 4px;
    border-radius: 8px;
    height: 48px;


    .nav-item {
      display        : flex;
      align-items    : center;
      cursor: pointer;
      gap            : 6px;
      text-decoration: none;
      color          : #606266;
      padding        : 8px 16px;
      border-radius  : 6px;
      transition     : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position       : relative;
      font-size      : 14px;

      &:hover, &.active {
        color     : #409EFF;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .nav-icon {
          transform: scale(1.1);
        }
      }

      &.router-link-active {
        color      : #409EFF;
        background : #ffffff;
        box-shadow : 0 2px 8px rgba(0, 0, 0, 0.05);
        font-weight: 500;
      }

      .nav-icon {
        display        : flex;
        align-items    : center;
        justify-content: center;
        font-size      : 16px;
        transition     : transform 0.3s ease;
      }
    }
  }

  @media (max-width: 768px) {
    &-content {
      padding: 0 16px;
    }

    .brand-title h1 {
      font-size: 18px;
    }

    .nav-container {
      gap: 16px;
    }

    .navigation {
      display: none;
    }
  }
}